<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<button>使用 localStorage </button>
			<input class="input" placeholder="请输入用户名" />
			<button class="save">存储用户名</button>
			<button class="get">获取用户名</button>
			<button class="remove">删除用户名</button>
			<button class="clear">清除所有用户名</button>
		</div>
	</body>

	<script>
		/**
		 * 本地存储特性
		 * 1、 数据存储在用户浏览器中
		 * 2、设置、读取方便，甚至页面刷新也不丢失数据
		 * 3、容量较大，sessionStorage 约5M，localStorage容量约20M
		 * 4、只能存储字符串，可以将对象JSON.stringify()编码后再存储
		 * */
		/**
		 * localStorage
		 * 1、生命周期永久有效。除非手动删除，否则关闭页面也会存在
		 * 2、可以多窗口（页面）共享（同一浏览器可以共享）
		 * 3、以键值对的形式存储使用
		 * 4、window.localStorage中的 window 可以省略
		 * */
		var inputL = document.querySelector(".input");
		var saveL = document.querySelector(".save");
		var getL = document.querySelector(".get");
		var removeL = document.querySelector(".remove");
		var clearL = document.querySelector(".clear");

		saveL.addEventListener("click", () => {
			var name = inputL.value;
			//window 可以省略
			window.localStorage.setItem("username", name);
		})
		getL.addEventListener("click", () => {
			// 获取用户名
			console.log("localStorage 用户名：", window.localStorage.getItem("username"));
		})
		removeL.addEventListener("click", () => {
			localStorage.removeItem("username");
		})
		clearL.addEventListener("click", () => {
			localStorage.clear();
		})
	</script>
</html>
